/** @type {HTMLCanvasElement} */
const canvas = document.getElementById("canvas1");
const ctx = canvas.getContext("2d");
const CANVAS_WIDTH = canvas.width = 500;
const CANVAS_HEIGHT = canvas.height = 800;

const img1 = new Image();
img1.src = "imgs/enemy/enemy1.png";
let gameFrame = 0;
let gameSpeed = 10;
// class Enemy1{
//     constructor(image){
//         this.x = Math.random()*CANVAS_WIDTH;
//         this.y = Math.random()*CANVAS_HEIGHT;
//         this.width = 293;
//         this.height = 155;
//         this.image = image;
//         this.frame = Math.floor(Math.random()*6);
//     }
//     update(){
//         this.x = this.x+(Math.random()*4-2);
//         this.y = this.y+(Math.random()*4-2);
//         if(gameFrame % gameSpeed ==0){
//             this.frame = this.frame+1 >= 6?0:this.frame+1;
//         }
//     }
//     draw(){
//         ctx.drawImage(this.image,this.frame*this.width,0,this.width,this.height,this.x,this.y,this.width/2,this.height/2);
//     }
// }

// 会 上下摇摆的敌人
// class Enemy2{
//     constructor(){
//         this.x = Math.random()*CANVAS_WIDTH;
//         this.y = Math.random()*CANVAS_HEIGHT;
//         this.width = 266;
//         this.height = 188;
//         this.image = new Image();
//         this.image.src="imgs/enemy/enemy2.png";
//         this.frame = Math.floor(Math.random()*6);
//         this.angel = Math.random()*2;
//         this.angelSpeed = 0.1;
//         this.angelCurv = Math.random()*2;
//     }
//     update(){
//         if(this.x+this.width <= 0){
//             this.x = CANVAS_WIDTH;
//         }
//         this.x = this.x - 1;
//         this.angel += this.angelSpeed;
//         this.y +=this.angelCurv* Math.sin(this.angel);
//         if(gameFrame % gameSpeed ==0){
//             this.frame = this.frame+1 >= 6?0:this.frame+1;
//         }
//     }
//     draw(){
//         ctx.drawImage(this.image,this.frame*this.width,0,this.width,this.height,this.x,this.y,this.width/2,this.height/2);
//     }
// }

// 会 上下摇摆的敌人
// class Enemy3{
//     constructor(){
//         this.x = Math.random()*CANVAS_WIDTH;
//         this.y = Math.random()*CANVAS_HEIGHT;
//         this.width = 218;
//         this.height = 177;
//         this.image = new Image();
//         this.image.src="imgs/enemy/enemy3.png";
//         this.frame = Math.floor(Math.random()*6);
//         this.angel = Math.random()*2;
//         this.angelSpeed = 0.2;
//         this.angelCurv = Math.random()*2;
//     }
//     update(){
//         this.x += this.angelCurv* Math.cos(this.angel*Math.PI/90);
    
//         this.y += this.angelCurv* Math.cos(this.angel*Math.PI/60);
//         this.angel += this.angelSpeed;
//         if(gameFrame % gameSpeed ==0){
//             this.frame = this.frame+1 >= 6?0:this.frame+1;
//         }
//     }
//     draw(){
//         ctx.drawImage(this.image,this.frame*this.width,0,this.width,this.height,this.x,this.y,this.width/2,this.height/2);
//     }
// }


// 巡逻模式敌人
class Enemy4{
    constructor(){
        this.x = Math.random()*CANVAS_WIDTH;
        this.y = Math.random()*CANVAS_HEIGHT;
        this.newX = Math.random()*CANVAS_WIDTH;
        this.newY = Math.random()*CANVAS_WIDTH;
        this.width = 213;
        this.height = 213;
        this.image = new Image();
        this.image.src="imgs/enemy/enemy4.png";
        this.frame = Math.floor(Math.random()*6);
        this.angel = Math.random()*2;
        this.angelSpeed = 0.2;
        this.angelCurv = Math.random()*2;
    }
    update(){
        if(gameFrame % 200 == 0){
            this.newX = Math.random()*CANVAS_WIDTH;
            this.newY = Math.random()*CANVAS_HEIGHT;
        }
       var dx = this.x - this.newX;
       var dy = this.y - this.newY;
       this.x = this.x-dx/60;
       this.y = this.y-dy/60;
    
      
        if(gameFrame % gameSpeed ==0){
            this.frame = this.frame+1 >= 6?0:this.frame+1;
        }
    }
    draw(){
        ctx.drawImage(this.image,this.frame*this.width,0,this.width,this.height,this.x,this.y,this.width/2,this.height/2);
    }
}

let enemyArray = [];
for(let i = 0;i<10;i++){
    enemyArray.push(new Enemy4());
}

function animate(){
    ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
    enemyArray.forEach(ele=>{
        ele.draw();
        ele.update();
    });
    gameFrame++;
    requestAnimationFrame(animate);
}

animate();

